前情提要

今天開始沒有新的專案要開發了，所以會找一些技巧或觀念來記錄，例如最近使用bootstrap發現一個問題，就是className怎麼越來越難想，而且一不小心就會重複命名，導致樣式互相覆蓋，於是我就去尋找之前一直有聽過的BEM 命名模式，想說了解一下並看看未來能不能實際應用

甚麼是BEM

BEM，是由三個英文字母所組成，字母分別代表三個項目，而這些項目能形成一種命名規則B__E--M，區塊 (Block) 與區塊中的子模組 (Element) 連接，使用兩個下底線(underscore)。與修飾子 (Modifier)連接，則使用到兩個連字號(hyphen)

• B: Block 區塊
• E: Element 元素(子模組)
• M: Modifier 修飾子(樣式)

有找到一篇講得很不錯的文章，在這裡放上連結分享給大家

使用方法

以我之前的程式碼為例，我們會在卡片設定一些className來增加閱讀性，例如card-title、bg-secondary-dark之類的，但是按照BEM正確命名方式應該為card__title、bg--light。接著我們會發現一個問題，如果直接把我原本的className改掉之後，我們會失去bootstrap的樣式，因為BEM的className是沒有樣式的，除非我們自己設定，但這樣就會失去用bootstrap的意義，因此我目前覺得必須兩個都寫，只是這也不是好方法，因為兩種命名太相似反而會混淆，覺得這個概念先理解就好

<!-- 原本程式碼 -->
<div
  class="card bg-secondary-dark rounded-0 position-absolute top-50 start-50 translate-middle ms-15 d-none d-xl-block"
  style="width: 336px; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px"
>
  <div
    class="card-body text-white position-relative p-6 d-flex flex-column justify-content-between align-items-center"
  >
    <div
      class="teacher-info d-flex flex-column justify-content-center align-items-center mb-4"
    >
      <img
        src="/assets/images/teacher01.jpg"
        alt=""
        class="rounded-circle mb-2"
        width="100"
      />
    </div>
    <div class="desc">
      <h5 class="card-title fs-4 text-center">基礎前端 - HTML</h5>
      <h6
        class="card-subtitle text-primary-green fs-3 my-3 fw-normal text-center"
      >
        前端語言
      </h6>
      <p class="card-text fs-3 fw-lighter">
        帶領無基礎的平民老百姓，從最基礎的 HTML
        語法出發，使用最淺顯易懂的語言與生活隨處可見的例子，輕鬆進入網頁架設的世界，完成一個基礎的網頁架設。
      </p>
    </div>
  </div>
</div>

<!-- 更改後程式碼 -->
<div
  class="card card--secondary-dark bg-secondary-dark rounded-0 position-absolute top-50 start-50 translate-middle ms-15 d-none d-xl-block"
  style="
    width: 336px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  "
>
  <div
    class="card-body card__body text-white position-relative p-6 d-flex flex-column justify-content-between align-items-center"
  >
    <div
      class="card__teacher-info d-flex flex-column justify-content-center align-items-center mb-4"
    >
      <img
        src="/assets/images/teacher01.jpg"
        alt=""
        class="card__teacher-img rounded-circle mb-2"
        width="100"
      />
    </div>
    <div class="card__desc">
      <h5 class="card-title card__title fs-4 text-center">基礎前端 - HTML</h5>
      <h6
        class="card-subtitlecard__subtitle text-primary-green fs-3 my-3 fw-normal text-center"
      >
        前端語言
      </h6>
      <p class="card__text fs-3 fw-lighter">
        帶領無基礎的平民老百姓，從最基礎的 HTML
        語法出發，使用最淺顯易懂的語言與生活隨處可見的例子，輕鬆進入網頁架設的世界，完成一個基礎的網頁架設。
      </p>
    </div>
  </div>
</div>